<template>
  <div style= "width: 100px;margin: 20px auto 0;">
      <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" className="lds-tail">
          <defs>
              <filter id="tail-ed76b6c4a9b0e" x="-100%" y="-100%" width="300%" height="300%" colorInterpolationFilters="sRGB">
                  <feGaussianBlur in="SourceGraphic" stdDeviation="3"></feGaussianBlur>
                  <feColorMatrix mode="matrix" values="1 0 0 0 0   0 1 0 0 0   0 0 1 0 0   0 0 0 60 -40" result="cm"></feColorMatrix>
              </filter>
          </defs>
          <g  filter="url(#tail-ed76b6c4a9b0e)" transform="rotate(251.402 50 50)">
              <animateTransform attributeName="transform" type="rotate" calcMode="linear" values="0 50 50;360 50 50" keyTimes="0;1" dur="4s" begin="0s" repeatCount="indefinite"></animateTransform>
              <g transform="rotate(353.922 50 50)">
                  <g  transform="translate(50 20)">
                      <circle cx="0" cy="0" r="19"  fill="#fc4309" transform="scale(0.5)"></circle>
                  </g>
                  <animateTransform attributeName="transform" calcMode="spline" type="rotate" values="0 50 50;360 50 50" keyTimes="0;1" keySplines="0.13333333333333333 0 0.03333333333333333 1" repeatCount="indefinite" dur="1"></animateTransform>
              </g>
              <g transform="rotate(353.431 50 50)">
                  <g transform="translate(50 20)">
                      <circle cx="0" cy="0" r="18" fill="#fc4309" transform="scale(0.5)"></circle>
                  </g>
                  <animateTransform attributeName="transform" calcMode="spline" type="rotate" values="0 50 50;360 50 50" keyTimes="0;1" keySplines="0.16666666666666669 0 0.06666666666666667 1" repeatCount="indefinite" dur="1"></animateTransform>
              </g>
              <g transform="rotate(352.88 50.0001 50.0001)">
                  <g transform="translate(50 20)">
                      <circle cx="0" cy="0" r="17" fill="#fc4309" transform="scale(0.5)"></circle>
                  </g>
                  <animateTransform attributeName="transform" calcMode="spline" type="rotate" values="0 50 50;360 50 50" keyTimes="0;1" keySplines="0.2 0 0.1 1" repeatCount="indefinite" dur="1"></animateTransform>
              </g>
              <g transform="rotate(352.258 50.0001 50.0001)">
                  <g  transform="translate(50 20)">
                      <circle cx="0" cy="0" r="16" fill="#fc4309" transform="scale(0.5)"></circle>
                  </g>
                  <animateTransform attributeName="transform" calcMode="spline" type="rotate" values="0 50 50;360 50 50" keyTimes="0;1" keySplines="0.23333333333333334 0 0.13333333333333333 1" repeatCount="indefinite" dur="1"></animateTransform>
              </g>
              <g transform="rotate(351.554 50 50)">
                  <g  transform="translate(50 20)">
                      <circle cx="0" cy="0" r="15" fill="#fc4309" transform="scale(0.5)"></circle>
                  </g>
                  <animateTransform attributeName="transform" calcMode="spline" type="rotate" values="0 50 50;360 50 50" keyTimes="0;1" keySplines="0.26666666666666666 0 0.16666666666666666 1" repeatCount="indefinite" dur="1"></animateTransform>
              </g>
              <g transform="rotate(350.752 50 50)">
                  <g  transform="translate(50 20)">
                      <circle cx="0" cy="0" r="14" fill="#fc4309" transform="scale(0.5)"></circle>
                  </g>
                  <animateTransform attributeName="transform" calcMode="spline" type="rotate" values="0 50 50;360 50 50" keyTimes="0;1" keySplines="0.30000000000000004 0 0.2 1" repeatCount="indefinite" dur="1"></animateTransform>
              </g>
              <g transform="rotate(349.832 50 50)">
                  <g  transform="translate(50 20)">
                      <circle cx="0" cy="0" r="13" fill="#fc4309" transform="scale(0.5)"></circle>
                  </g>
                  <animateTransform attributeName="transform" calcMode="spline" type="rotate" values="0 50 50;360 50 50" keyTimes="0;1" keySplines="0.33333333333333337 0 0.23333333333333334 1" repeatCount="indefinite" dur="1"></animateTransform>
              </g>
              <g transform="rotate(348.772 50 50)">
                  <g  transform="translate(50 20)">
                      <circle cx="0" cy="0" r="12" fill="#fc4309" transform="scale(0.5)"></circle>
                  </g>
                  <animateTransform attributeName="transform" calcMode="spline" type="rotate" values="0 50 50;360 50 50" keyTimes="0;1" keySplines="0.3666666666666667 0 0.26666666666666666 1" repeatCount="indefinite" dur="1"></animateTransform>
              </g>
              <g transform="rotate(347.539 50 50)">
                  <g  transform="translate(50 20)">
                      <circle cx="0" cy="0" r="11" fill="#fc4309" transform="scale(0.5)"></circle>
                  </g>
                  <animateTransform attributeName="transform" calcMode="spline" type="rotate" values="0 50 50;360 50 50" keyTimes="0;1" keySplines="0.4 0 0.3 1" repeatCount="indefinite" dur="1"></animateTransform>
              </g>
              <g transform="rotate(346.095 50 50)">
                  <g  transform="translate(50 20)">
                      <circle cx="0" cy="0" r="10" fill="#fc4309" transform="scale(0.5)"></circle>
                  </g>
                  <animateTransform attributeName="transform" calcMode="spline" type="rotate" values="0 50 50;360 50 50" keyTimes="0;1" keySplines="0.43333333333333335 0 0.3333333333333333 1" repeatCount="indefinite" dur="1"></animateTransform>
              </g>
              <g transform="rotate(344.387 50.0001 50.0001)">
                  <g  transform="translate(50 20)">
                      <circle cx="0" cy="0" r="9" fill="#fc4309" transform="scale(0.5)"></circle>
                  </g>
                  <animateTransform attributeName="transform" calcMode="spline" type="rotate" values="0 50 50;360 50 50" keyTimes="0;1" keySplines="0.4666666666666667 0 0.36666666666666664 1" repeatCount="indefinite" dur="1"></animateTransform>
              </g>
              <g transform="rotate(342.349 50 50)">
                  <g  transform="translate(50 20)">
                      <circle cx="0" cy="0" r="8" fill="#fc4309" transform="scale(0.5)"></circle>
                  </g>
                  <animateTransform attributeName="transform" calcMode="spline" type="rotate" values="0 50 50;360 50 50" keyTimes="0;1" keySplines="0.5 0 0.4 1" repeatCount="indefinite" dur="1"></animateTransform>
              </g>
              <g transform="rotate(339.888 50 50)">
                  <g  transform="translate(50 20)">
                      <circle cx="0" cy="0" r="7" fill="#fc4309" transform="scale(0.5)"></circle>
                  </g>
                  <animateTransform attributeName="transform" calcMode="spline" type="rotate" values="0 50 50;360 50 50" keyTimes="0;1" keySplines="0.5333333333333333 0 0.43333333333333335 1" repeatCount="indefinite" dur="1"></animateTransform>
              </g>
              <g transform="rotate(337.776 50 50)">
                  <g  transform="translate(50 20)">
                      <circle cx="0" cy="0" r="6" fill="#fc4309" transform="scale(0.5)"></circle>
                  </g>
                  <animateTransform attributeName="transform" calcMode="spline" type="rotate" values="0 50 50;360 50 50" keyTimes="0;1" keySplines="0.5666666666666667 0 0.4666666666666667 1" repeatCount="indefinite" dur="1"></animateTransform>
              </g>
              <g transform="rotate(333.673 50 50)">
                  <g  transform="translate(50 20)">
                      <circle cx="0" cy="0" r="5" fill="#fc4309" transform="scale(0.5)"></circle>
                  </g>
                  <animateTransform attributeName="transform" calcMode="spline" type="rotate" values="0 50 50;360 50 50" keyTimes="0;1" keySplines="0.6 0 0.5 1" repeatCount="indefinite" dur="1"></animateTransform>
              </g>
              <g transform="rotate(328.658 50 50)">
                  <g  transform="translate(50 20)">
                      <circle cx="0" cy="0" r="4" fill="#fc4309" transform="scale(0.5)"></circle>
                  </g>
                  <animateTransform attributeName="transform" calcMode="spline" type="rotate" values="0 50 50;360 50 50" keyTimes="0;1" keySplines="0.6333333333333333 0 0.5333333333333333 1" repeatCount="indefinite" dur="1"></animateTransform>
              </g>
              <g transform="rotate(322.471 50 50)">
                  <g  transform="translate(50 20)">
                      <circle cx="0" cy="0" r="3" fill="#fc4309" transform="scale(0.5)"></circle>
                  </g>
                  <animateTransform attributeName="transform" calcMode="spline" type="rotate" values="0 50 50;360 50 50" keyTimes="0;1" keySplines="0.6666666666666666 0 0.5666666666666667 1" repeatCount="indefinite" dur="1"></animateTransform>
              </g>
              <g transform="rotate(314.758 50 50)">
                  <g  transform="translate(50 20)">
                      <circle cx="0" cy="0" r="2" fill="#fc4309" transform="scale(0.5)"></circle>
                  </g>
                  <animateTransform attributeName="transform" calcMode="spline" type="rotate" values="0 50 50;360 50 50" keyTimes="0;1" keySplines="0.7 0 0.6 1" repeatCount="indefinite" dur="1"></animateTransform>
              </g>
              <g transform="rotate(305.028 50 50)">
                  <g  transform="translate(50 20)">
                      <circle cx="0" cy="0" r="1" fill="#fc4309" transform="scale(0.5)"></circle>
                  </g>
                  <animateTransform attributeName="transform" calcMode="spline" type="rotate" values="0 50 50;360 50 50" keyTimes="0;1" keySplines="0.7333333333333333 0 0.6333333333333333 1" repeatCount="indefinite" dur="1"></animateTransform>
              </g>
              <g transform="rotate(292.595 50 50)">
                  <g  transform="translate(50 20)">
                      <circle cx="0" cy="0" r="0" fill="#fc4309" transform="scale(0.5)"></circle>
                  </g>
                  <animateTransform attributeName="transform" calcMode="spline" type="rotate" values="0 50 50;360 50 50" keyTimes="0;1" keySplines="0.7666666666666666 0 0.6666666666666666 1" repeatCount="indefinite" dur="1"></animateTransform>
              </g>
          </g>
      </svg>
  </div>
</template>
